Cette page aurra pour but d'expliquer les différents choix que nous avons faits au niveau du design et de l'esthétique du site
Logo ChessWorld |
Nous avons réalisé notre logo à l’aide du logiciel d’édition d’image Gimp ainsi que du logiciel de traitement de texte Microsoft office Word. J’ai eu l’idée du site en allant sur le site des cliparts fournis dans l’énoncé de travail, je suis tombé sur la photo de l’échiquier vert et blanc. Comme je l’ai expliqué dans l’accueil, j’ai récemment découvert les échecs donc je me suis dit que ce serait une bonne idée de dédier un site à ce sujet. Je suis donc parti de la photo de l’échiquier, j’ai cherché un nom de site et j’ai trouvé ChessWorld. Ainsi, à l’aide de Word j’ai réalisé la forme du bandeau, puis j’ai utilisé Gimp pour le reste. Au départ je voulais seulement mettre le titre du site sur l’échiquier mais je trouvais le logo trop vide donc j’y ai rajouté deux rois ce qui rend le logo plus complet. |
| Niveau du texte | Police | Taille | Couleur | Décoration |
|---|---|---|---|---|
| Titre (h1) | Times New Roman | 38px | Blanc | Text shadow (vert) |
| Sous-titre (h2) | Times New Roman | 28px | Blanc | ∅ |
| Texte (p, td, th, li, etc.) | Calibri | 24px | Blanc | ∅ |
Pour le choix des polices et des tailles je ne me suis pas vraiment cassé la tête. Effectivement, j’ai tout simplement pris la police par défaut pour les balises h sur Chrome (Times) car je trouvais que cela allait bien avec le site. En effet, Times est une police avec Serif, ce qui donne un aspect assez ancien, je trouvais que cela correspondait bien avec le sujet du site; les échecs. Pour la taille, j’ai choisi par essais-erreur la taille de h1 qui me semblait la plus jolie, puis j’ai ajusté la taille du sous-titre pour que ça aille bien ensemble. J’ai rajouté un contour vert au titre du site car je trouvais que juste en blanc ça manquait un peu de couleur sur la page. Pour ce qui est du texte, je suis allé sur un site répertoriant différentes polices, j’ai trouvé que la police Calibri était belle, je l’ai donc gardé. J’ai ajusté la taille pour que ce soit facile à lire étant donné que mon site a quand même beaucoup de textes.
Pour ce qui est du choix des couleurs du site, j’ai opté pour un thème sombre et sobre. Effectivement, la palette de couleurs du site est dans le gris/noir,
ce qui facilite la lecture du contenu la nuit, cela évite la fatigue oculaire. De plus, les thèmes sombres deviennent de plus en plus populaires et la majorité
des applications actuelle en offre un. J’ai donc utilisé un texte blanc pour offrir un bon contraste avec la couleur de fond. La couleur de la barre de navigation
est la même que celle des sections foncées et est plus foncée que la couleur du fond. Pour la couleur d’accentuation, j’ai pris la même que la couleur de
l'échiquier du logo, j’ai utilisé un outil en ligne qui m’a permis d’avoir le code rgb de cette couleur. Je me suis beaucoup inspiré du site Chess.com pour l’interface du site,
j’ai utilisé la même palette de couleurs en utilisant le même outil en ligne que pour l’échiquier. C’est sur ce site que je joue aux échecs en ligne et j’ai toujours apprécié l’interface.
Aussi, j’ai utilisé la couleur d’accentuation avec parcimonie à quelques endroits pour rendre le site plus esthétique. J’ai fait en sorte de ne pas trop l’utilisé pour qu’elle demeure
seulement une couleur d’accentuation.